/**
 * 外勤签到
 * @author levy
 */
(function( lf, r) {
    var ajax = lf.utils.ajax,
        log = lf.utils.log,
        RC = r.createClass;


    var Photo = RC({
        delFn:function(e){
            this.props.delFn(e);
        },
        render: function () {
            //<img className="photo" src="../public/images/common/camera.png" />
           return(
               <div className="ele-relative ele-hide">
                   <img className="photo" />
                   <a onTouchEnd={this.delFn} data-type="deleteBtn" className="delete-btn">
                       <span className="delete-icon"></span>
                   </a>
               </div>
           );
        }
    });

    var TakePhotos = RC({
        takePhoto: function(){
            var $takePhoto = $('#take-photo'),
                len = $takePhoto.find('img[src]').length,
                $photos = $takePhoto.find('img');
            //alert(len);

            lf.bridgeJs.selectPhoto(3,function(){
                lf.bridgeJs.registerHandler('getPhotoFromApp',function(data){
                    //alert(data);

                    $photos.eq(len).attr('src',data)
                        .parent().toggleClass('ele-hide');

                    if(len >= 2){
                        $takePhoto.find('.camera').toggleClass('ele-hide');
                    }
                });
            },1);

        },
        delFn:function(e){
            var $takePhoto = $('#take-photo'),
                len = $takePhoto.find('img[src]').length;
            if(len == 3)
                $takePhoto.find('.camera').toggleClass('ele-hide');

            var $item;
            //点击的是a元素
            if(e.target.getAttribute('data-type') == 'deleteBtn'){
                $item = $(e.target).parent();
            }else{
                //由于事件捕获,可能点击的是span
                $item = $(e.target).parent().parent();
            }
            $item.toggleClass('ele-hide').find('img').attr('src',null);


        },
        render: function () {
            var count = [1,2,3];
            var me = this;
            var photos = count.map(function(){
                return <Photo delFn={me.delFn}/>;
            });

            return(
                <div id="take-photo" className="flex-box-row take-photo">
                    {photos}
                    <a onTouchEnd={this.takePhoto} className="camera"></a>
                </div>
            );
        }
    });

    var Location = RC({
        getInitialState: function () {
            return({
                place1:'国家数字家庭示范基地',
                place2:'青蓝街22号',
            });
        },
        componentWillMount: function () {
        },
        render:function(){
            //alert(this.props.location);
            var state = this.state;
            return(
                <div id="location" className="flex-box-row location">
                    <span className="mui-icon mui-icon-location"></span>
                    <div>
                        <p>{state.place1}</p>
                        <p>{this.props.location.address}</p>
                    </div>
                </div>
            );
        }
    })

    var Body = RC({
        render: function () {
            //<img />
            return (
                <form id="outside" className="outside" action="#">
                    <textarea name="content" id="content" placeholder="请描述外勤工作内容"></textarea>
                    <TakePhotos/>
                    <Location location={this.props.location}/>
                    <div className="submit-wrapper">
                        <input type="submit" value="确定" className="form-submit-btn"/>
                    </div>
                </form>
            )
        }
    });

    lf.bridgeJs.getLocation(function (address) {
        r.render(
            <Body location={address}/>,
            document.getElementById('root'),function(){

            }
        )
    } );

})( liefeng, React)
